<template>
<div class="app-container">
    <loading v-show="loading"></loading>
    <el-card class="box-card" style="margin-bottom:1%;">
        <div slot="header" class="clearfix">
          <span>考核党员列表</span>
          <div class="btn-box">
            <el-button
                  size="mini"
                  type="primary"
                  @click="$router.back(-1)" style="margin-right:20px;">返 回</el-button>
          </div>
        </div>
        <el-table
          :data="details"
          border
          max-height="450"
          ref="tableData"
          style="width: 100%;margin-bottom:1%;"
          >
          <el-table-column
            label="党员姓名"
            width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="籍贯"
          >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.natives }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="联系电话"
          >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.phone }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="120px">
            <template slot-scope="scope">
              <el-button
                size="mini"
                icon="el-icon-document"
                @click="starReport(scope.$index, scope.row)">开始考核</el-button>
              </template>
          </el-table-column>
        </el-table>
      </el-card>
</div>
</template>
<script>
import Loading from '@/components/loading/loading'
import { getSelfReported } from '@/api/partyMember/nextReportedList'
export default {
  components: {
    Loading
  },
  data() {
    return {
      searchData: {
        quarterCycleKey: ''
      },
      num: 0,
      loading: false,
      details: []
    }
  },
  created() {
    this.loading = true
    this.searchData.quarterCycleKey = this.$route.query.quarterCycleKey
    this.getgetSelfReportedList()
  },
  methods: {
    getgetSelfReportedList() {
      getSelfReported(this.searchData).then(response => {
        this.details = response.data.partyMemberInfoList
        this.loading = false
      }).catch(error => {
        this.loading = false
        console.log(error)
      })
    },
    starReport(index, row) {
      this.$router.push({
        path: 'partyMemberNextReported',
        name: '党员考核中',
        query: {
          quarterCycleKey: this.$route.query.quarterCycleKey,
          operationFlag: '002'
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-form-item{margin-bottom:0;}

</style>
